<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
        <div class="baseList">
          <div class="tableBoxs">

            <!--  表格  -->
            <t-table
              row-key="index"
              :data="tableData"
              :columns="COLUMNS"
              :stripe="stripe"
              :bordered="bordered"
              :hover="hover"
              :table-layout="tableLayout ? 'auto' : 'fixed'"
              :size="size"
              :show-header="showHeader"
              cell-empty-content="-"
              resizable
              lazy-load
              @row-click="handleRowClick"
            >

              <!-- 图片预览及展示 -->
              <template #image="{ row }">
                  <div class="tdesign-demo-image-viewer__base">
                      <t-image-viewer :images="[row.image]">
                          <template #trigger="{ open }">
                              <div class="tdesign-demo-image-viewer__ui-image">
                                  <img
                                      alt="test"
                                      :src="row.image"
                                      class="tdesign-demo-image-viewer__ui-image--img"
                                      />
                                  <div
                                      class="tdesign-demo-image-viewer__ui-image--hover"
                                      @click="open"
                                      >
                                      <span><BrowseIcon size="1.4em" /> 预览</span>
                                  </div>
                              </div>
                          </template>
                      </t-image-viewer>
                  </div>
              </template>

              <!-- 价格处理 -->
               <template #price="{ row }">
                {{ isDecimals(row.price) ? row.price : row.price + '.00' }}
              </template>

              <!-- 操作按钮 -->
               <template #op="{ row }">
                <div class="operateCon">
                  <a class="btn-dl">删除</a>
                  <a class="font-bt">编辑</a>
                  <a class="delete">禁用</a>
                </div>
               </template>
            </t-table>

            <!-- 分页 -->
            <t-pagination
              v-if="total > 10"
              v-model="pagination.pageNum"
              v-model:pageSize="pagination.pageSize"
              :total="total"
              @change="onPageChange"
            />
          </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { TableProps } from 'tdesign-vue-next';
import { COLUMNS } from './constants';
import { getProjectList } from '@/api/serve';


//分页对象
const pagination = ref({
  pageSize: 5,
  pageNum: 1
})
/* 表格列表数据 */
const tableData = ref([]);
/* 总记录数 */
const total = ref(0);
 //在js代码中添加isDecimals方法，判断当前字段是否包含了小数点
 const isDecimals = (val) => {
    if (String(val).indexOf('.') > -1) {
      return true
    }
    return false
}

const stripe = ref(true);
const bordered = ref(true);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref<TableProps['size']>('medium');
const showHeader = ref(true);

const handleRowClick: TableProps['onRowClick'] = (e) => {
  console.log(e);
};


/* ======================方法定义=================================== */
/* 分页查询护理项数据 */
const pageQuery = async () => {
  const result = await getProjectList(pagination.value);
  if (result.code === 200) {
    tableData.value = result.data.records;
    total.value = result.data.total;
  }
}
const onPageChange = (pageInfo) => {
  console.log(pageInfo);
  //给分页参数重新赋值：当前页和每页大小
  pagination.value.pageNum = pageInfo.current;
  pagination.value.pageSize = pageInfo.pageSize;
  pageQuery();
};

onMounted(() => {
  pageQuery()
})
</script>
